import React, { useEffect, useState } from 'react';
import { Button, Select, Space } from 'antd';
import { connect } from 'dva';
import { pick } from 'lodash';
import usePermissionCheck from '@/hooks/usePermissionCheck';
import styles from './index.less';

interface Props {
  auth: string;
  permissions: string[];
  value: any;
  options: any;
  defaultValue: any;
  onSubmit: any;
}

const FilterForm: React.FC<Props> = ({
  auth,
  permissions,
  value,
  options,
  defaultValue,
  onSubmit,
}) => {
  const [screen] = usePermissionCheck(permissions, auth);

  const [query, setQuery] = useState({
    region: '',
    subregion: '',
    city: '',
    store: '',
    areaRange: '',
    brand: '',
  });

  const getQuery = (options: { [x: string]: any }, ...other: any[]) => {
    let result = options;

    other.forEach(key => {
      result = result?.[key]?.children;
    });

    return Object.keys(result || {})[0];
  };

  const updateQuery = {
    region: (value: string) => {
      const subregion = getQuery(options, value);
      const city = getQuery(options, value, subregion);
      const store = getQuery(options, value, subregion, city);
      setQuery({ ...query, region: value, subregion, city, store });
    },
    subregion: (value: string) => {
      const city = getQuery(options, query.region, value);
      const store = getQuery(options, query.region, value, city);

      setQuery({ ...query, subregion: value, city, store });
    },
    city: (value: string) => {
      const store = getQuery(options, query.region, query.subregion, value);

      setQuery({ ...query, city: value, store });
    },
    default: (key: string, value: string | number) => {
      setQuery({ ...query, [key]: value });
    },
  };

  const handleSubmit = () => {
    onSubmit(pick(query, ['region', 'subregion', 'city', 'store', 'areaRange', 'brand']));
  };

  const handleReset = () => {
    setQuery(defaultValue);
    onSubmit(defaultValue);
  };

  useEffect(() => {
    if (value) {
      setQuery({ ...value });
    }
  }, [value]);

  return (
    <div className={styles.wrapper}>
      <div className={styles.card}>
        <Select
          bordered={false}
          placeholder="大区"
          className={styles.input}
          size="small"
          style={{ width: 94 }}
          value={query.region}
          disabled={!screen}
          // allowClear
          onChange={value => updateQuery['region'](value)}
        >
          {Object.keys(options || {})?.map(key => (
            <Select.Option value={key} key={key}>
              {options[key].name}
            </Select.Option>
          ))}
        </Select>

        <Select
          bordered={false}
          placeholder="小区"
          className={styles.input}
          size="small"
          style={{ width: 94 }}
          value={query.subregion}
          disabled={!screen}
          // allowClear
          onChange={value => updateQuery['subregion'](value)}
        >
          {Object.keys(options[query.region]?.children || {}).map(key => (
            <Select.Option value={key} key={key}>
              {(options[query.region]?.children || {})?.[key]?.name}
            </Select.Option>
          ))}
        </Select>
        <Select
          bordered={false}
          placeholder="城市"
          className={styles.input}
          size="small"
          style={{ width: 94 }}
          value={query.city}
          disabled={!screen}
          // allowClear
          onChange={value => updateQuery['city'](value)}
        >
          {Object.keys(options[query.region]?.children?.[query.subregion]?.children || {}).map(
            key => (
              <Select.Option value={key} key={key}>
                {(options[query.region]?.children?.[query.subregion]?.children || {})?.[key]?.name}
              </Select.Option>
            ),
          )}
        </Select>
        <Select
          bordered={false}
          placeholder="专营店"
          className={styles.input}
          size="small"
          style={{ minWidth: 120, maxWidth: 234 }}
          value={query.store}
          disabled={!screen}
          // allowClear
          onChange={value => updateQuery['default']('store', value)}
        >
          {Object.keys(
            options[query.region]?.children?.[query.subregion]?.children?.[query.city]?.children ||
              {},
          ).map(key => (
            <Select.Option value={key} key={key}>
              {
                (options[query.region]?.children?.[query.subregion]?.children?.[query.city]
                  ?.children || {})?.[key]?.name
              }
            </Select.Option>
          ))}
        </Select>
        <Select
          bordered={false}
          placeholder="区域范围"
          className={styles.input}
          style={{ width: 132 }}
          size="small"
          value={query.areaRange}
          // allowClear
          onChange={value => updateQuery['default']('areaRange', value)}
        >
          <Select.Option value={5}>区域范围 5km</Select.Option>
          <Select.Option value={10}>区域范围 10km</Select.Option>
          <Select.Option value={20}>区域范围 20km</Select.Option>
        </Select>
        <Select
          bordered={false}
          placeholder="品牌"
          value={query.brand}
          size="small"
          style={{ width: 94 }}
        >
          <Select.Option value="DFPV">风神</Select.Option>
        </Select>
        <Button type="primary" className={styles.btn} onClick={handleSubmit}>
          查询
        </Button>
      </div>
      <Button className={styles.reset} onClick={handleReset}>
        重置
      </Button>
    </div>
  );
};

export default connect(({ menu }: any) => ({ permissions: menu.permissions }))(FilterForm);
